<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <style>
        body {
            margin: 30px;
        }

        /* 入场时正序播放关键帧动画 逐渐减速 两端维持起止状态（入场前保持首帧状态 出场后保持末帧状态） */
        /* 动画的fill-mode参见：https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-fill-mode */
        .bounce-enter-active {
            animation: myanim .5s ease-out both;
        }

        /* 离场时逆序播放关键帧动画 逐渐加速 两端维持起止状态 */
        .bounce-leave-active {
            animation: myanim .5s reverse ease-in both;
        }

        /* 定义关键帧动画 */
        @keyframes myanim {
            0% {
                transform: scale(0);
            }

            50% {
                transform: scale(1.25);
            }

            100% {
                transform: scale(1);
            }
        }
    </style>
    <script src='./vue.global.js'></script>
</head>

<body>
    <div id="demo">
        <button @click="show = !show">Toggle show</button>

        <transition name="bounce">
            <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at
                lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
        </transition>
    </div>
    <script>
        const Demo = {
            data() {
                return {
                    show: true
                }
            }
        }

        Vue.createApp(Demo).mount('#demo')
    </script>
</body>

</html>